<template>
  <div class="card" style="height: 100%; width: 100%">
    <ElTabs v-model="activeTab">
      <ElTabPane label="流程表单" name="process-form">
        <MicroRender :designer="designer"></MicroRender>
      </ElTabPane>
      <ElTabPane label="流程图" name="process-graph">
        <ProcessGraph :task-id="taskId"></ProcessGraph>
      </ElTabPane>
      <ElTabPane label="流程记录" name="process-record">
        <div style="width: 720px; margin: 0 auto">
          <ProcessRecord :task-id="taskId"></ProcessRecord>
        </div>
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<script setup lang="ts">
import { ElTabs, ElTabPane } from "element-plus";
import MicroRender from "@/components/Micro/Render/index.vue";
import { useRoute } from "vue-router";
import { ref } from "vue";
import microCamundaApi from "@/views/micro/api/camunda.api";
import ProcessGraph from "./ProcessGraph.vue";
import ProcessRecord from "./ProcessRecord.vue";
const router = useRoute();
const taskId = router.query.taskId as string;
const activeTab = ref("process-form");
const designer = ref({
  widget: {},
  global: {
    design: false,
    appId: undefined,
    datasourceId: undefined,
    tableModel: undefined,
    tableName: undefined,
    primaryColumn: undefined,
    pageList: [],
    taskId: taskId,
    nodeName: "",
    primaryValue: null,
    buttonPermList: []
  }
});
const pageModel = await microCamundaApi.getTaskModel(taskId);
designer.value.widget = pageModel.pageJson;
designer.value.global.nodeName = pageModel.nodeName;
designer.value.global.primaryValue = pageModel.primaryValue;
designer.value.global.buttonPermList = pageModel.buttonPermList || [];
</script>

<style scoped></style>
